<template>
  <!-- 地图页面中，点击浮窗发生跳转到此页面 -->
  <!-- 城市地图的展示 -->
  <div>
    <h1>城市页面--展示城市的地图</h1>

    <div id="cityMap"></div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: "City",
  components: {},
  // 定义属性
  data() {
    return {};
  },
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log("------", this.$route);
    //城市地图
    // this.$echarts.provinceMap("cityMap", this.$route.params.city, [{ name: "朝阳", value: 200 },]);
    //请求城市的数据
    this.$api
      .cityData({
        //将参数给cityData方法（api/index.js）
        city: this.$route.params.city,
      })
      .then((res) => {
        console.log(res.data.retdata);
        //[{name:'',value:''}]
        // 进行数据的处理
        let arr = [];
        res.data.retdata.subList.forEach((element) => {
          let temp = {};
          // 使用test 方法检查字符串是否与给出的正则表达式模式相匹配,如果是则返回 true,否则就返回 false
          var reg = /北京|上海|天津/;
          if (reg.test(this.$route.params.city)) {
            temp.name = element.city;
          } else {
            temp.name = element.city + "市";
          }
          temp.value = element.curConfirm;
          arr.push(temp);
          console.log(temp);
        });
        // 传参调用$echarts.provinceMap方法,显示地图
        this.$echarts.provinceMap("cityMap", this.$route.params.city, arr);
      });
  },
};
</script>

<style lang="less" scoped>
#cityMap {
  width: 6rem;
  height: 11rem;
  margin: 0 auto;
}
</style>
